<template>
  <div style="width:100%;height:60px;padding: 0;margin: 0;">
    <el-row style="margin: 0">
      <el-col :span="12">
        <div style="float: left;margin-left: 3px">
          <i  class="fa fa-podcast fa-2x" ></i>
          <span><i>UVA</i></span>
          <div><i>Manager</i></div>
        </div>
      </el-col>

      <el-col :span="4">
<!--        <div style="float:left;margin-left: 50px">-->
<!--          <el-button style="margin: 10px" round type="primary">功能1 </el-button>-->
<!--        </div>-->
        <el-input placeholder="请输入要定位的地点..." style="float:left;margin-top: 10px" v-model="city">
          <template #append>
            <el-button plain type="primary" @click="getLocation(this.city)">定位</el-button>
          </template>
        </el-input>
      </el-col>
      <el-col :span="2">
        <div style="float:left;margin-left: 50px">
          <el-button style="margin: 10px" round type="primary" @click="openTrackInfo()">采样信息 </el-button>
        </div>
      </el-col>
      <el-col :span="2">
        <div style="float:left;margin-left: 50px">
          <el-button style="margin: 10px" round type="primary" @click="userManage()" :disabled="userManBtn">人员管理 </el-button>
        </div>
      </el-col>
      <el-col :span="2">
        <div style="float:left;margin-left: 50px">
          <el-button style="margin: 10px" round type="primary" @click="testLog()" >功能待定 </el-button>
        </div>

      </el-col>
      <el-col :span="2">
        <div style="float:left;margin-left: 50px">
<!--          个人信息-->
          <el-button style="margin: 10px" circle type="success" @click="userInfoHandler()">
            <el-icon>
              <UserFilled></UserFilled>
            </el-icon>

          </el-button>
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import {UserFilled} from '@element-plus/icons-vue'
export default {
  name: "Header",
  components:{UserFilled},
  data(){
    return{
      userManBtn:false,
      user: {},
      store:this.$store,
      city:''
    }
  },
  mounted() {
    this.user = JSON.parse(sessionStorage.getItem("user"));
    if(this.user!=null){
      if(this.user.permission===2){
        this.userManBtn=true;
      }
    }
  },
  methods:{
    testLog:function(){
      this.store.commit('setLogVisible',!this.store.state.logVisible);
    },
    userManage:function (){
      if(this.user.permission===2){
        console.log("没有权限")
      }else{
        console.log("跳转到权限管理界面");
        const newPage = this.$router.resolve("/user");
        window.open(newPage.href,'_blank');
      }
    },
    userInfoHandler:function (){
      this.store.commit('setUserInfoDialogVisible',true);
    },
    getUsername:function (){
      console.log(this.user);
      this.user = sessionStorage.getItem('user');
      return this.user.username;
    },
    getLocation:function (address){
      let geocoder = this.store.state.geocoder;
      let map = this.store.state.map;
      geocoder.getLocation(address, function(status, result) {
        if (status === 'complete'&&result.geocodes.length) {
          var lnglat = result.geocodes[0].location
          map.setCenter(lnglat);
          map.setZoom(15);
        }else{
          console.log('根据地址查询位置失败');
        }
      });
    },
    openTrackInfo:function () {
      this.store.commit('setTrackInfoDialogVisible',true);
    }
  }
}
</script>

<style scoped>

</style>